<template>
  <div class="tool-container" :style="curStyles">
    <popover
      v-model:open="curVisible"
      placement="bottomLeft"
      overlayClassName="tool-dom-tree"
    >
      <div data-type="dom" class="icon dom">
        <MenuOutlined />
        <span class="text"> {{ curNodeName }} </span>
      </div>

      <template #content>
        <template v-for="item in parentNodes" :key="item.id">
          <div
            data-type="dom"
            class="icon dom parent-node-item"
            @click="onSelect(item)"
          >
            <MenuOutlined />
            <span class="text"> {{ item?.nodeName }} </span>
          </div>
        </template>
      </template>
    </popover>

    <tooltip title="复制" @click.stop="onCopyNode">
      <CopyOutlined class="icon" />
    </tooltip>

    <tooltip title="删除" @click.stop="onDelNode">
      <DeleteOutlined class="icon" />
    </tooltip>
  </div>
</template>

<script lang="ts" setup>
import { useDataComTool } from './util'
import { Tooltip, Popover } from 'ant-design-vue'
import {
  MenuOutlined,
  CopyOutlined,
  DeleteOutlined,
} from '@ant-design/icons-vue'

interface DesignToolProps {
  getContainer: (triggerNode: HTMLElement) => HTMLElement
}
const props = withDefaults(defineProps<DesignToolProps>(), {
  getContainer: () => {
    return () => document.body
  },
})

const {
  curStyles,
  curVisible,
  parentNodes,
  curNodeName,

  onSelect,
  onCopyNode,
  onDelNode,
  getEleTooStyle,
} = useDataComTool(props)

defineExpose({ setEleTooStyle: getEleTooStyle })
</script>

<style lang="less" scoped>
.tool-container {
  margin: 0;
  padding: 0;
  z-index: 10;
  display: none;
  color: #fff;
  font-size: 12px;
  position: absolute;
  padding-bottom: 2px;
  transform: translateX(-100%);

  .icon {
    height: 100%;
    height: 18px;
    padding: 0 5px;
    line-height: 16px;
    border-radius: 1px;
    display: inline-block;
    background-color: #006cff;
  }

  .dom {
    margin-right: 2px;
    width: auto;
    display: flex;
    border-radius: 3px;
    white-space: nowrap;
    align-items: center;

    .text {
      margin-left: 5px;
    }
  }
}
</style>

<style lang="less">
.tool-dom-tree {
  padding-top: 0 !important;
  background-color: transparent;

  .ant-popover-content {
    box-shadow: none;
    background-color: transparent;
  }

  .ant-popover-inner {
    padding: 0;
    box-shadow: none;
    background-color: transparent;
  }

  .ant-popover-arrow {
    display: none;
  }

  .ant-popover-inner-content {
    padding: 0;
  }

  .parent-node-item {
    width: auto;
    color: #fff;
    display: block;
    margin-top: 3px;
    padding: 0 5px;
    font-size: 12px;
    border-radius: 3px;
    background: #78869a;
    cursor: pointer;

    .text {
      margin-left: 5px;
    }
  }
}
</style>
